트랜스파일러와 번들러 알아보기 1 | 기본 개념과 babel

자바스크립트 모듈 시스템

// utils/plusOne.js
const plusOne = (number) => number + 1

export default plusOne

// src/index.js
import plusOne from "./utils/plusOne.ts"

export default function main() {
  console.log(plusOne(1))
}

• 이렇게 코드들이 서로 다른 파일에 존재하고 함수나 변수 등을 넘겨서 사용하는 구조

cjs - commonjs (Node.JS)

• NodeJS 가 채택한 방식 - NodeJS 환경의 모듈 시스템

• module.exports 로 내보내고 require 로 가져옴

// utils/plusOne.js
const plusOne = (number) => number + 1

module.exports = plugOne

// src/index.js
const plusOne require("./utils/plusOne.ts");

export default function main() {
  console.log(plusOne(1))
}

esm - es module (표준 스펙)

• 최신 Javascript 버전에서 지원되는 방식

• 현재는 Node.js 에서 .mjs 확장자를 통해 지원

• export 로 내보내고 import 로 가져옴

트랜스파일러 / 컴파일러 란?

• 자바스크립트는 NodeJS, 여러 브라우저 환경에서 동작하고 각자가 자바스크립트 문법에 차이가 있음
요즘 개발자가 작성하는 코드는 더 이상 브라우저에서 바로 실행되지 않음 (타입스크립트, 최신 ES2023 등)
⇒ 그렇기 때문에 브라우저에서 이해할 수 있는 문법으로 변경이 필요함
⇒ 이런 과정을 트팬스파일, 컴파일 이라 함

1. Babel - 기본

2. Typescript - 타입시스템을 가지고 컴파일 수행

3. esbuild
• Go 기반으로 빠른 속도와 번들링까지 가능한 차세대 트랜스 파일러
• Babel 단점을 극복하기 위해 나온 도구

4. SWC
• Rust 를 기반으로 빠른 속도와 쉬운 사용을 목표를 위한 트랜스 파일러
• Babel 단점을 극복하기 위해 나온 도구
• vercel 에서 만듦

번들러란?

• 개발자가 작성하는 코드는 실행환경(브라우저/NodeJS) 보다는 개발자들이 이해할 수 있는 구조로 파일을 분할하고 구조적으로 작업함
⇒ 폴더, 파일 등을 구분함 (apis, components, …)
⇒ 💡 즉, 모듈 시스템을 이용해서 모듈간 연결을 만듦

• 개발자가 인간이 이해하기 쉬운 구조로 작업한 것을 브라우저에서 실행하기 위해 작업물을 함께 묶는 작업을 수행하는데 이를 번들링이라함
⇒ 💡 즉, 브라우저가 이행할 수 있는 적절한 크기의 파일(하나 또는 여러개)로 만들고 실행함!

• 보통 번들링하면서 최적화 까지 수행함
• 주석 제거, 불필요한 부분제거, minify 등

1. Webpack - 기본

2. Rollup
• es6 모듈 시스템을 기반으로 라이브러리 번들링에 많이 쓰임

3. vite
• 빠른 속도와 쉬운 사용법이 장점인 번들러

4. esbuild
• Go 기반 빠른 속도와 트랜스파일까지 가능한 차세대 번들러

babel

• 💡 바벨은 자바스크립트 컴파일러이다.

• 개발자가 작성한 코드를 브라우저가 이해할 수 있는 코드로 변환하는 대표적인 트랜스파일러

• .babelrc.json, babel.cofig.json, .babelr.cjs, bable.config.js 이 중의 하나로 바벨 설정

• 어떤 문법을 어떻게 변환할지 표현식이 있음

• @babel/plugin-transfor-arrow-functions 는 화살표함수를 브라우저가 이해할 수 있는 코드로 변환하는 플러그인

• 여러 플러그인을 목록을 하나의 형태로 만든것이 preset
설정 파일에 여러 플러그인들을 하나 하나 작성하기 힘들기 때문에 preset 형태로 제공

• @babel/preset-env 와 .browserslist 와 같이 사용하면 어떤 타깃의 브라우저 버전으로 변환시킬지 정의할 수 있음
.browserlist 사용없이, @babel/preset-env 의 target 속성만 지정해도됨!

• @babel/preset-env
최신 ES 스펙을 가지고 자동으로 필요한 문법만 처리하여 사이즈를 줄임

• @babel/preset-react
리액트 사용을 위해 jsx 등을 처리해주는 프리셋

• @babel/preset-typescript
타입스크립트 문법을 변환해주는 프리셋
변환시 타입 에러를 잡을 수 없는 단점이 있음
⇒ type 에러를 잡을 수 없어서 빌드시 tsc 를 별도로 수행시켜서 체크할 수 있음
tsc && pnpm run build ← 이런식으로

• 바벨에 관한 자세한 내용은 여기 참고